<template>
  <div class="leave">
    <breadcrumb title="请假申请" homePath="/student" />
    <el-card>
      <!-- 填写请假信息 -->
      <h1>发起请假</h1>
      <el-form ref="leaveFormRef" :model="leaveForm" label-width="80px">
        <el-form-item label="请假类型">
          <el-select v-model="leaveForm.leavetype" placeholder="请选择请假类型">
            <el-option label="病假" value="病假"></el-option>
            <el-option label="回家" value="回家"></el-option>
            <el-option label="探亲" value="探亲"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假时间">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="leaveForm.start_time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="text-align: center">至</el-col>
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="leaveForm.end_time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="详细原因">
          <el-input type="textarea" v-model="leaveForm.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交申请</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 请假数据列表 -->
      <h1>我的请假</h1>
      <el-table :data="leaveData" stripe style="width: 100%" border>
        <template slot="empty">
          <p>{{ emptyText }}</p>
        </template>
        <el-table-column label="申请时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="leavetype" label="类型" width="120" />
        <el-table-column prop="reason" label="详细信息" />
        <el-table-column label="离校时间" width="120">
          <template slot-scope="scope">
            {{ (scope.row.start_time + "").substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="返校时间" width="120">
          <template slot-scope="scope">
            {{ (scope.row.end_time + "").substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="审核结果" width="150">
          <template slot-scope="scope">
            <p v-if="scope.row.state == 1" style="color: green">通过</p>
            <p v-else-if="scope.row.state == 2" style="color: red">未通过</p>
            <p v-else style="color: gray">待审核</p>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allLeaveNum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";
import { getuserLeave } from "network/student/getuserLeave";
import { setLeave } from "network/student/setLeave";

export default {
  name: "Leave",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      leaveForm: {
        leavetype: "",
        start_time: "",
        end_time: "",
        reason: "",
      },
      leaveData: [],
      emptyText: "",
      allLeaveNum: 0,
      queryInfo: {
        currPage: 1,
        pageSize: 2,
      },
    };
  },
  created() {
    this.$store.commit("setCurrentIndex", {
      type: "studentCurrentIndex",
      index: 2,
    });

    this.getuserLeave();
    if (this.allLeaveNum == 0) {
      this.emptyText = "暂无数据";
    }
  },
  methods: {
    // 获取该用户请假审批与数量(分页)
    async getuserLeave() {
      let token = window.sessionStorage.getItem("token");
      let { currPage, pageSize } = this.queryInfo;
      let res = await getuserLeave({ token, currPage, pageSize });
      this.leaveData = res.data;
      this.allLeaveNum = res.total;
    },
    // 提交请假
    async onSubmit() {
      let { leaveForm } = this;
      console.log(leaveForm);
      if (
        leaveForm.leavetype == "" ||
        leaveForm.start_time == "" ||
        leaveForm.end_time == "" ||
        leaveForm.reason == ""
      ) {
        return this.$message.error("请填写完整请假申请表~~");
      }

      leaveForm.start_time = this.handleDate(leaveForm.start_time);
      leaveForm.end_time = this.handleDate(leaveForm.end_time);
      leaveForm.token = window.sessionStorage.getItem("token");
      let res = await setLeave(leaveForm);
      this.getuserLeave();
      this.$message.success(res);
      this.reset();
    },
    // 处理日期
    handleDate(date) {
      let y = date.getFullYear();
      let m = (date.getMonth() + 1 + "").padStart(2, "0");
      let d = (date.getDate() + "").padStart(2, "0");
      date = y + "-" + m + "-" + d;
      return date;
    },
    // 重置表单
    reset() {
      this.leaveForm = {
        leavetype: "",
        start_time: "",
        end_time: "",
        reason: "",
      };
    },
    // 处理改变一页的数量
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getuserLeave();
    },
    // 处理改变页码
    handleCurrentChange(newPage) {
      this.queryInfo.currPage = newPage;
      this.getuserLeave();
    },
  },
};
</script>

<style lang="less" scoped>
.leave {
  .el-card {
    h1 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      margin-bottom: 10px;
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>